<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta charset="utf-8">
    <!-- <link rel="stylesheet" type="text/css" href="{$_G['URL']['YX2020_CSS']}css/reset.css"> -->

    <script src="https://css2020.yixuan.net/2020css/yx2020/js/jquery.js?v=2"></script>
    <link rel="stylesheet" type="text/css" href="https://css2020.yixuan.net/2020css/yx2020/css/reset.css">
    <link rel="stylesheet" type="text/css" href="https://css2020.yixuan.net/2020css/yx2020/css/swiper.min.css">

    <script src="https://css2020.yixuan.net/2020css/yx2020/js/swiper-3.4.2.min.js"></script>
    <!-- 以下：时间弹窗样式等 -->
    <link  rel="stylesheet" href="https://css2020.yixuan.net/2020css/beilai/css/index.css"/>
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://css2020.yixuan.net/2020css/beilai/js/vue@next.js?v=1"></script>
    <script src="https://css2020.yixuan.net/2020css/beilai/js/vant.min.js?v=1"></script>
    {if $config['weixinh5']==2}
    <script> var vConsole = new VConsole(); </script>
    <script src="{$_G['URL']['YX2020_CSS']}js/vconsole.min.js"></script>
    {/if}
    <script>
        init();
        window.onresize = init;
        function init(){
            document.documentElement.style.fontSize =
                document.documentElement.clientWidth / 7.5 + 'px';
        }
    </script>
    <title>{$theme['title']}-支付确认</title>
    <style>
        .wrap{
            background: #f7f7f7;
            padding: 0.2rem 0.16rem 1.13rem;
            overflow: hidden;
        }
        .wrap .card{
            background: #ffffff;
            padding: 0 0.3rem;
            border-radius: 0.2rem;
            margin-bottom: 0.2rem;
        }
        .wrap .card .title{
            line-height: 0.8rem;
            font-size: 0.32rem;
            padding-left: 0.24rem;
            position: relative;
        }
        .wrap .card .title::after{
            content: "";
            display: block;
            position: absolute;
            width: 0.08rem;
            height: 0.31rem;
            background: linear-gradient(to bottom,#f94084,#fed5e4);
            top: 0;
            bottom: 0;
            margin: auto;
            left: 0.01rem;
            border-radius: 0.31rem;
        }
        .wrap .card .form_item{
            height: 0.96rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 0.01rem solid #f7f7f7;
        }
        .wrap .card .form_item:last-child{
            border-bottom: none;
        }
        .wrap .card .form_item span{
            color: #333333;
            font-size: 0.24rem;
        }
        .wrap .card .form_item input{
            border: none;
            text-align: right;
            color: #333333;
            font-size: 0.24rem;
        }
        .wrap .card .form_item input::-webkit-input-placeholder { /* Edge */
            color: #999999;
        }
        .wrap .card .form_item input:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: #999999;
        }
        .wrap .card .form_item input::placeholder {
            color: #999999;
        }
        .wrap .card .form_item select{
            color: #333333;
            border: none;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            padding-right: 0.3rem;
            outline: none;
            background: transparent;
        }
        .wrap .card  .select{
            position: relative;
        }
        .wrap .card .select::after,.wrap .card .select::before {
            width: 0;
            height: 0;
            border: 0.1rem solid transparent;
            border-top-color: #ffffff;
            position: absolute;
            content: "";
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .wrap .card .select::before{
            top: 0;
            right: 0;
            transform: translateY(0.02rem);
            border-top-color: #999999;
        }


        .wrap .card .form_item .item{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 0.28rem;
        }
        .wrap .card .form_item .radio_box{
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .wrap .card .form_item .radio_box .checkbox_img{
            width: 0.13rem;
            height: 0.09rem;
            display: none;
        }
        .wrap .card .form_item .radio_box .input{
            width: 0.27rem;
            height: 0.27rem;
            border-radius: 0.27rem;
            background: #f7f7f7;
            border: 0.01rem solid #eeeeee;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 0.15rem;
        }
        .wrap .card .form_item input:checked+.input{
            background-image: linear-gradient(to top,#f8277a,#fe848d);
        }
        .wrap .card .form_item input:checked+.input .checkbox_img{
            display: block;
        }
        .wrap .card .form_item .radio_box input{
            display: none;
        }


        .wrap .card .li{
            display: flex;
            justify-content: flex-start;
            padding: 0.24rem 0.11rem;
            background: #ffffff;
            border-radius: 0.2rem;
            position: relative;
            border-bottom: 0.01rem solid #f7f7f7;
        }
        .wrap .card .li:last-child{
            border-bottom: none;
        }
        .wrap .card .li .head_img{
            width: 1.22rem;
            height: 1.22rem;
            border-radius: 0.14rem;
            flex-grow: 7;
        }
        .wrap .card .li .right{
            color: #999999;
            font-size: 0.24rem;
            padding-left: 0.4rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
        }
        .wrap .card .li .right .tit{
            width: 4.8rem;
            color: #333333;
            font-size: 0.28rem;
        }

        .wrap .card .li .right .data{
            display: flex;
            justify-content: flex-start;
            padding-top: 0.16rem;
            line-height: 0.42rem;
        }
        .wrap .card .li .right .data .d_left,.wrap .card .li .right .data .d_right{
            display: flex;
            flex-direction: column;
        }
        .wrap .card .li .right .data .d_left{
            padding-right: 0.3rem;
            position: relative;
        }
        .wrap .card .li .right .data .d_right{
            padding-left: 0.3rem;
        }
        .wrap .card .li .right .data .d_right .dr_t{
            font-size: 0.28rem;
            color: #f91d76;
        }
        .wrap .card .li .right .data .d_right .dr_b{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .wrap .card .li .right .data .d_right .dr_b img{
            width: 0.21rem;
            height: 0.21rem;
            margin-right: 0.07rem;
        }
        .wrap .card .li .right .name{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 0.1rem;
            margin-top: 0.1rem;
        }
        .wrap .card .li .right .name span{
            color: #5086ff;
            background: #ecf5ff;
            line-height: 0.32rem;
            padding: 0 0.08rem;
            font-size: 0.2rem;
            border-radius: 0.06rem;
        }
        .wrap .card .li .right .d_txt{
            color: #999999;
            font-size: 0.24rem;
            line-height: 0.38rem;
        }
        .wrap .card .li .right .d_txt span{
            font-size: 0.26rem;
            color: #f91d76;
        }

        .footer{
            position: fixed;
            bottom: 0;
            background: #ffffff;
            width: 7.5rem;
            left: 0;
            right: 0;
            box-shadow: 0 -0.1rem 0.2rem 0 rgba(200,200,200,0.5);
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 1.13rem;
            z-index: 2;
        }
        .footer .button{
            width: 3.25rem;
            height: 0.86rem;
            background:linear-gradient(to right,#f82079,#fe878e);
            color: #ffffff;
            font-size: 0.28rem;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 0.26rem;
            border-radius: 0.2rem;
        }
        .footer .button .card_img{
            width: 0.34rem;
            height: 0.28rem;
            margin-right: 0.2rem;
        }
        .footer .button.over{
            background: #f3f3f3;
            color: #999999;
        }
        .footer .button.over .over_img{
            width: 0.3rem;
            height: 0.3rem;
            margin-right: 0.12rem;
        }
        .footer .left{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-left: 0.43rem;
        }
        .footer .left span{
            color: #999999;
            font-size: 0.28rem;
        }
        .footer .left .price{
            color: #f8337d;
        }
        .footer .left .money{
            width: 0.3rem;
            height: 0.3rem;
            margin-right: 0.14rem;
        }
    
.van-popup{
  width: 6.56rem;
  height: 7.04rem;
  border-radius: 0.14rem;
  background: #FFFFFF;
}
.van-picker__toolbar{
	display: none;
}
.van-popup h5{
	
	  font-size: 0.36rem;
	  color: #333333;
	  margin-top: 0.36rem;
	  text-align: center;
}
.van-popup p{
  color: #666666;
  text-align: center;
  margin-top: 0.12rem;
  font-size: 0.26rem;
}
.van-picker__columns{
	
	background: #f6f6f6;
  margin: 0.36rem auto;
  border: 0.01rem solid #f2f2f2;
  
    width: 5.30rem;
    height: 2.62rem;
}
.van-picker-column__item{
}
.van-picker-column__item--selected{
	color: #8926a5;
	background: #ffffff;
}

.btn_wrap{
  border: 0.01rem solid #f1f1f1;
  width: 5.28rem;
  margin: 0 auto;
  height: 0.68rem;
  border-radius: 0.34rem;
  display: flex;
  justify-content: space-around;
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
}
.btn_wrap .button{
  appearance: none;
  -ms-progress-appearance: none;
  background: none;
  font-size: 0.24rem; 
  height: 0.68rem;
  line-height: 0.68rem;
  padding-top: 0;
  padding-bottom: 0;
  color: #666666;
  font-weight: bold;
}
.headSearch{
    margin-top: 0px;
}
    </style>
</head>
<body style="overflow: visible!important;">
<div class="wrap">
    <div class="card">
        <div class="title">报名信息</div>
        {loop $form $item}
<!--      文本  -->
        {if $item['type']=='txt'}
        <div class="form_item">
            <span>{$item['title']}</span>
            {if $item['name']=='mobiletext'}
            <input type="number" name="{$item['name']}" id="{$item['name']}" placeholder="{$item['placeholder']}">
            {else}
            <input type="text" name="{$item['name']}" id="{$item['name']}" placeholder="{$item['placeholder']}">
            {/if}
        </div>
        {/if}
<!--        日期-->
        {if $item['type']=='date'}
        <div class="form_item">
            <span>{$item['title']}</span>
            <input class="date_input" type="text" name="{$item['name']}" id="{$item['name']}" placeholder="{$item['placeholder']}" onclick="openPicker()">
        </div>
        {/if}
<!--        数字-->
        {if $item['type']=='number'}
        <div class="form_item">
            <span>{$item['title']}</span>
            <input type="number" name="{$item['name']}" id="{$item['name']}" placeholder="{$item['placeholder']}">
        </div>
        {/if}
<!--        手机号-->
        {if $item['type']=='mobile'}
        <div class="form_item">
            <span>{$item['title']}</span>
            <input type="mobile" name="{$item['name']}" id="{$item['name']}" placeholder="{$item['placeholder']}">
        </div>
        {/if}
<!--        下拉 单选-->
        {if $item['type']=='select' || $item['type']=='radio'}
        <div class="form_item select">
            <span>{$item['title']}</span>
            <select name="{$item['name']}" id="{$item['name']}">
                <option value ="">请选择{$item['title']}</option>
                {loop $item['val'] $row}
                <option value ="{$row}">{$row}</option>
                {/loop}
            </select>
        </div>
        {/if}
<!--        单选-->
<!--        {if $item['type']=='radio'}-->
<!--        <div class="form_item">-->
<!--            <span>{$item['title']}</span>-->
<!--            <div class="radio_box">-->
<!--                {loop $item['val'] $row}-->
<!--                <label class="item">-->
<!--                    <input type="radio" name="{$item['name']}" id="{$item['name']}" value="{$row}">-->
<!--                    <div class="input">-->
<!--                        <img class="checkbox_img" src="{$_G['URL']['BEILAI_IMG']}/ok.png">-->
<!--                    </div>-->
<!--                    <span>{$row}</span>-->
<!--                </label>-->
<!--                {/loop}-->
<!--            </div>-->
<!--        </div>-->
<!--        {/if}-->
<!--        多选缺失-->
<!--        {if $item['type']=='checkbox'}-->
<!--        <div class="form_item">-->
<!--            <span>{$item['title']}</span>-->
<!--            <div class="radio_box">-->
<!--                {loop $item['val'] $row}-->
<!--                <label class="item">-->
<!--                    <input type="checkbox" name="{$item['name']}[]">-->
<!--                    <div class="input">-->
<!--                        <img class="checkbox_img" src="{$_G['URL']['BEILAI_IMG']}/ok.png">-->
<!--                    </div>-->
<!--                    <span>{$row}</span>-->
<!--                </label>-->
<!--                {/loop}-->
<!--            </div>-->
<!--        </div>-->
<!--        {/if}-->
        {/loop}
    </div>

    <div class="card">
        <div class="title">{$course_other_name}信息</div>
<!--        需要加一个input  name为 course_address  value为course中对应的值-->
<!--        需要加一个input  name为 gift_ids  value为course中对应的值-->
        <div id="course_box">
            
        </div>
    </div>
    <div class="card">
        <div class="title">{$gift_other_name}信息</div>
<!--        需要加一个input  name为 course_address  value为course中对应的值-->
<!--        需要加一个input  name为 gift_ids  value为course中对应的值-->
        <div id="gift_box">
            
        </div>
    </div>

    <div class="footer">
        <div class="left">
            <img src="{$_G['URL']['BEILAI_IMG']}/o_money.png" class="money"/>
            <span>总计：</span>
            <span class="price">
                {$price_info['now_price']}元
                {if $price_info['coupon']}
                <span style="font-size: 10px;color: gray;display: block;">(已使用优惠{$price_info['coupon']}元)</span>
                {/if}
            </span>
        </div>
        {if $theme_status==1}
        <div class="button" id="topay">
            <img src="{$_G['URL']['BEILAI_IMG']}/card.png" class="card_img">
            <span>立即报名</span>
        </div>
        {else}
        <div class="button over">
            <img src="{$_G['URL']['BEILAI_IMG']}/imoj.png" class="over_img">
            <span>活动已结束</span>
        </div>
        {/if}
    </div>
    <!-- 以下：日期弹窗 -->
    <div id="pop_papp" style="display: none;">
        <van-popup v-model:show="show">
        <h5>选择宝贝生日</h5>
        <p>{{chooseDate.getFullYear()+"年"+(chooseDate.getMonth()+1)+"月"+chooseDate.getDate()+"日"}}</p>
         <div class="btn_wrap">
             <a href="javascript:" onclick="selected()" class="button">确定</a>
         </div>
            <van-datetime-picker v-model="chooseDate"	type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate" 
             confirm-button-text="" @change="change" item-height="0.6rem" visible-item-count="5"/>
         </van-popup>
    </div>
</div>
<script>
    var chooseDate;
    const { createApp } = Vue;
    const app = {
      data() {
        return {
            show:true,
          minDate: new Date(1949, 9, 1),
          maxDate: new Date(),
          chooseDate:new Date(2020, 0, 1),
        }
      },
      methods:{
          change(){
              chooseDate=this.chooseDate
          }
      }
    }
    let vueApp=createApp(app);

    function openPicker(){
            //调用此方法可弹出日期选择框
        vueApp=createApp(app);
        vueApp.use(vant).use(vant.Popup).use(vant.DatetimePicker).mount('#pop_papp');
        $("#pop_papp").show();
    }
    
  function selected(){
            //选择弹窗宝贝生日后的事件
    vueApp.unmount('#pop_papp');
    $("#pop_papp").hide();
    chooseDate=window.chooseDate;
    if (chooseDate == undefined) {
      var chooseDate = new Date(2020, 0, 1);
    }

    var month = chooseDate.getMonth()+1;
    if (month < 10) {
      month = '0'+month;
    }
    var day = chooseDate.getDate();
    if (day < 10) {
      day = '0'+day;
    }
    
    var date = chooseDate.getFullYear()+"-"+month+"-"+day;
    $(".date_input").val(date);
    // window.location.href = postUrl;
  }
    let course_address_str=localStorage.getItem("course_address")||[];
    let gift_ids=localStorage.getItem("gift_ids")||0;
    let giftStr=localStorage.getItem("giftStr")||[];
    if (!course_address_str){
        window.location.href = go(-2);
    }
    
    
    //↓↓↓↓↓↓↓↓课程数据回显
    let course_address=JSON.parse(course_address_str);
    let courseStr=``;
    for(let i=0;i<course_address.length;i++){
        courseStr+=`<div class="li">
                <img class="head_img" src="${course_address[i].top_img}">
                <div class="right">
                    <div class="tit">${course_address[i].name}</div>
                    <div class="data">
                        <div class="d_left d_txt">
                            <div>机构:${course_address[i].shangjia_name}</div>
                        </div>
                    </div>
                </div>
            </div>`;
    }
    $("#course_box").html(courseStr);
    //↑↑↑↑↑↑↑↑
    //↓↓↓↓↓↓↓↓赠品数据回显
    if (giftStr && giftStr.length>0){
        let giftObj=JSON.parse(giftStr);
        let giftHTML=``;
        for(let i=0;i<giftObj.length;i++){
            giftHTML+=
                `<label class="li">
            <img class="head_img" src="${giftObj[i].top_img}" alt="">
            <div class="right">
                <div class="tit">${giftObj[i].name}</div>
                <div class="data">
                    <div class="d_left d_txt">
                        <div>价值：<span>${giftObj[i].price}</span></div>
                    </div>
                </div>
            </div>
        </label>`;
        }
        $("#gift_box").html(giftHTML);
    }
    //↑↑↑↑↑↑↑↑
    let confirm_course_address=[];
    for(let i=0;i<course_address.length;i++){
        confirm_course_address.push({
            shangjia_id:course_address[i].shangjia_id,
            courseid:course_address[i].courseid,
            address:course_address[i].address
        });
    }
    console.log(confirm_course_address)
    function confirm(){
        let confirm_course_address=[];
        for(let i=0;i<course_address.length;i++){  
            confirm_course_address.push({
                shangjia_id:course_address[i].shangjia_id,
                courseid:course_address[i].courseid,
                address:course_address[i].address
            });
        }
        $.ajax({
            method:"POST",
            url:"/{php echo createMobileUrl('wx', array('themeid'=>$themeid,'from'=>'mobile','r'=>'beilai.index.payconfirm'));}",
            data:{
                course_address:confirm_course_address,
                gift_ids:gift_ids
            },
            success:function(res){
                console.log(res);
            }
        })
    }
</script>
{include file='../../plugin/beilai/template/mobile/tips'}
{include file='../../plugin/beilai/template/mobile/wxpay'}
{include file='base/addlog'}